<template>
	<view class="u-page">
		<view class="tablebox">
			<scroll-view class="table" scroll-x="true" v-if="!showline && zhankai">
				<view class="thead">
					<view class="td" style="width: 180rpx;">网格</view>
					<view class="td" style="width: 120rpx;">商铺总数</view>
					<view class="td" style="width: 120rpx;">下单商铺</view>
					<view class="td" style="width: 120rpx;">配送订单</view>
					<view class="td" style="width: 30rpx;"></view>
					<view class="td fixright" style="width: 80rpx;">展示</view>
				</view>
				<view class="tbody" v-for="(w,index) in wuliu" :key="index">
					<view class="td" style="width: 180rpx;">{{w.gird_title}}</view>
					<view class="td" style="width: 120rpx;">{{w.total_store}}</view>
					<view class="td" style="width: 120rpx;">{{w.store[1]}}/{{w.store[0]}}</view>
					<view class="td" style="width: 120rpx;">{{w.orders[1]}}/{{w.orders[0]}}</view>
					<view class="td" style="width: 30rpx;"></view>
					<view class="td fixright" style="width: 80rpx;"><radio @click="checkGird(index)" :checked="index==show_gird_index" color="#1296db" shape="circle" style="transform: scale(0.7);"></radio></view>
				</view>
			</scroll-view>
			<view v-if="!showline" :class="'szbutton'+(zhankai?' shouqi':' zhankai')" @click="zhankai=!zhankai">{{zhankai?'收起':'展开'}}</view>
			<view v-if="showline==2" class="showline">
				<u-button @click="clickDriver" icon="map-fill" text="下一驻点" size="small" type="success" customStyle="width:25%"></u-button>
				<u-button @click="resetDriver" icon="play-circle-fill" text="重新开始" size="small" type="warning" customStyle="width:25%"></u-button>
				<u-button @click="quitDriver" icon="close-circle-fill" text="退出操作" size="small" type="error" customStyle="width:25%"></u-button>
			</view>
			<view v-if="showline==1" class="showline">
				<u-button @click="clickShunxu" icon="rewind-right-fill" text="按顺序浏览" size="small" type="success" customStyle="width:100%"></u-button>
			</view>
		</view>
		<map :style="'position:absolute;top:0;width: 100%; height: '+height+'px;'" @callouttap="clickCalloutap"  @regionchange="regionchange" :polyline="polyline" :markers="markers" :latitude="latitude" :longitude="longitude" scale="14.5">
			<cover-view slot="callout">
				<cover-view :marker-id="-driver.driver_id">
					<cover-view class="driverinfo" v-if="showline==2">
						<cover-view>{{driver.time}}出现在当前位置</cover-view>
					</cover-view>
					<cover-view class="driverinfo" v-if="!showline">
						<cover-view>{{driver.realname}} {{driver.time}}出现在当前位置</cover-view>
						<cover-view class="showdetail">点击查看司机当天所有位置</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</map>	
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				wuliu:[],
				zhankai:true,
				show_gird_index:0,
				height:'',
				longitude:'106.62254',
				latitude:'26.6015',
				markers:[],
				driver:{},
				showline:false,
				page:0,
				polyline:[],
				scale:15,
				drivermarker:''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=>{
					this.height = res.windowHeight;
				}
			});
			this.$get('admin/channel/wuliu').then(res=>{
				this.wuliu=res;
				this.parseMakers();
			});
		},
		methods: {
			...methods,
			clickShunxu:function(){
				this.showline=2;				
				this.polyline=[];
				this.markers=this.markers.filter(res=>{
					if(res.id>0){
						return true;
					}
				});
				this.clickDriver();
			},
			quitDriver:function(){
				this.showline=false;
				this.zhankai=true;
				this.polyline=[];
				this.page=0;
				this.driverposition(this.wuliu[this.show_gird_index].gird_id);
			},
			resetDriver:function(){
				this.page=0;
				this.polyline=[];
				this.clickDriver();
			},
			getdriverpostion:function(){
				this.$get('admin/channel/driverposition',{driver_id:this.driver.driver_id,page:this.page}).then(res=>{
					if(res.length>0){
						let marker = {
							id: -this.driver.driver_id,
							latitude: parseFloat(res[0].latitude),
							longitude: parseFloat(res[0].longitude),
							iconPath: baseUrl+'assets/img/map/hc.png',
							width: 40,
							height: 40,
							customCallout:{
								display:'ALWAYS',
								anchorX:0,
								anchorY:0
							}
						};
						this.driver.time=res[0].createtime;		
						this.markers.pop();					
						this.markers.push(marker);
						if(this.page>1){
							this.polyline.push({
								points:[
									{
										latitude:parseFloat(this.latitude),
										longitude:parseFloat(this.longitude)
									},
									{
										latitude:parseFloat(res[0].latitude),
										longitude:parseFloat(res[0].longitude)
									}
								],
								arrowLine:true,
								color:'#12b417',
								width:5
							});
						}
						this.longitude = marker.longitude;
						this.latitude = marker.latitude;
					}
				});
			},
			clickCalloutap:function(){
				if(this.showline)return;
				this.$get('admin/channel/driverposition',{driver_id:this.driver.driver_id,page:-1}).then(res=>{
					let markers=[];
					let polyline=[];
					for(let i=0;i<res.length;i++){
						let marker = {
						 	id: -(i+1),
						 	latitude: parseFloat(res[i].latitude),
						 	longitude: parseFloat(res[i].longitude),
						 	iconPath: baseUrl+'assets/img/map/tm.png',
						 	width: 1,
						 	height: 1,
							callout:{
								content:res[i].createtime,
								display:'ALWAYS',
								borderRadius:20,
								fontSize:16,
								bgColor:'#c70c0f',
								color:'#fff',
								padding:5,
								anchorX:0,
								anchorY:0
							}
						 };
						 markers.push(marker);
						 if(i>0){
							polyline.push({
								points:[
									{
										latitude:parseFloat(res[i-1].latitude),
										longitude:parseFloat(res[i-1].longitude)
									},
									{
										latitude:parseFloat(res[i].latitude),
										longitude:parseFloat(res[i].longitude)
									}
								],
								arrowLine:true,
								color:'#12b417',
								width:5
							});
						} 
					}
					for(let i=0;i<this.markers.length;i++){
						let marker=this.markers[i];
						marker.label='';
						markers.push(marker);
					}
					this.markers=markers;
					this.polyline=polyline;
					this.showline=1;
				});		
			},
			clickDriver:function(e){
				if(this.showline!=2)return;
				this.page++;
				this.getdriverpostion();
			},
			checkGird:function(e){
				this.show_gird_index=e;
				this.parseMakers();
			},
			driverposition:function(gird_id){			
				this.$get('admin/channel/driverposition',{gird_id:gird_id}).then(res=>{
					 if(res.length>0){
						let marker = {
						 	id: -res[0].driver_id,
						 	latitude: parseFloat(res[0].latitude),
						 	longitude: parseFloat(res[0].longitude),
						 	iconPath: baseUrl+'assets/img/map/hc.png',
						 	width: 40,
						 	height: 40,
							customCallout:{
								display:'ALWAYS',
								anchorX:0,
								anchorY:0
							}
						 };
						 this.markers.push(marker);
						 this.driver={
							 driver_id:res[0].driver_id,
							 time:res[0].createtime,
							 realname:res[0].driver.realname,
							 mobile:res[0].driver.mobile
						}; 
					 }	 
				});
			},
			parseMakers:function(){
				let markers = [];
				let customers=this.wuliu[this.show_gird_index].customers;
				for (let i = 0; i < customers.length; i++) {
					let iconPath,color;		
					if(customers[i].type=='receive'){
						iconPath = baseUrl+'assets/img/map/x1.png';
						color='#12b417';	
					}	
					if(customers[i].type=='unreceive'){
						iconPath = baseUrl+'assets/img/map/x3.png';
						color='#c70c0f';
					}	
					if(customers[i].type=='weixiadan'){
						iconPath = baseUrl+'assets/img/map/x2.png';
						color='#a6a6a6';	
					}
					let marker = {
						id: customers[i].id,
						latitude: parseFloat(customers[i].latitude),
						longitude: parseFloat(customers[i].longitude),
						iconPath: iconPath,
						width: 26,
						height: 26
					};
					if(this.scale>=14.5){
						marker.label={
							content:customers[i].name,
							fontSize:12,
							color:color,
							anchorX:0,
							anchorY:-40,
							textAlign:'center'
						};
					}else{
						marker.width=parseInt(1.8*this.scale);
						marker.height=parseInt(1.8*this.scale);
					}
					if(i===0){
						this.longitude = marker.longitude;
						this.latitude = marker.latitude;
					}
					markers.push(marker);
				}
				this.markers = markers;
				this.driverposition(this.wuliu[this.show_gird_index].gird_id);
			},
			regionchange:function(e){
				if(!this.showline && e.type=='end'){
					this.scale=e.detail.scale;
					this.parseMakers();
				}			
			}
		}
	} 
</script>

<style lang="scss">
page{
	background-color: #eeeeee;
}
.tablebox{
	padding: 0 20rpx;
	background-color: #fff;
	position: relative;
	z-index: 9999;
	.szbutton{
		position: absolute;
		right: 0;
		width: 70rpx;
		background-color: rgba(172, 226, 255, 0.9);
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #1296db;		
		padding-left: 10rpx;
	}
	.shouqi{
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 30rpx;
		background-position: -2rpx 16rpx;
	}
	.zhankai{
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 30rpx;
		background-position: -2rpx 16rpx;
	}
	.table{
		font-size: 26rpx;	
		width: 100%;
		padding-right: 100rpx;
		.thead{
			font-weight: bold;
		}
		.thead,.tbody{
			width: 800rpx;
			display: flex;
			justify-content: space-between;
		}
		.td{
			height: 60rpx;
			line-height: 60rpx;
		}
		.fixright{
			position: fixed;
			right: 0;
			text-align: center;
			background-color: rgba(172, 226, 255, 0.8);
		}
	}
}
.driverinfo{
	background-color: #fff;
	padding: 20rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	.showdetail{
		text-decoration: underline;
		color:#1296db;
		position: relative;
		z-index: 999;
	}
}
.showline{
	position: fixed;
	width: 90%;
	left: 5%;
	bottom: 20rpx;
	z-index: 9999;
	display: flex;
	justify-content: space-between;
}
</style>